<template>
  <div class="ui-tabs">
    <div class="slide">
      <ul class="swiper-wrapper">
        <li
          class="swiper-slide"
          v-for="(tab,idx) in tabs"
          :key="tab.name"
          :class="{'active': idx == onIndex}"
        >
          <a href="javascript:void(0)" @click="pick(tab,idx)">{{tab.name}}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";

function getIndexById(arr, id) {
  let index = 0;
  for (let i = 0, len = arr.length; i++; i < len) {
    if (arr.id == id) {
      index = i;
      break;
    }
  }
  return index;
}
export default {
  name: "ui-tabs",
  props: ["list", "active"],
  data() {
    return {
      onIndex: this.active, //this.$utils.getUrlKey("idx")
      swiper: "",
      tabs: []
      // htmlName: location.pathname.replace(/\/(.+)\.html/, "$1") + "NowTag"
    };
  },
  mounted() {
    this.tabs = this.list;
    this.$nextTick(() => {
      this.swiper = new Swiper(".ui-tabs>.slide", {
        initialSlide: this.onIndex,
        freeMode: true,
        slidesPerView: "auto",
        freeModeSticky: true
      });
      // this.swiper.slideTo(this.$utils.getUrlKey("idx"), 1000, false);
    });
  },

  methods: {
    pick(item, idx) {
      this.$emit("choose", item);
      this.onIndex = idx;
      // 返回上一页，记住tag
    }
  }
};
</script>

<style lang="less" scoped>
.ui-tabs {
  position: relative;
  flex: 1;
  z-index: 2;
  display: flex;
  height: 87px;
  box-sizing: content-box;
  // border-bottom: 1px solid #efefef;
  background-color: #fff;

  &.sticky {
    // position: fixed;
    // top: 0;
    // left: 0;
    width: 100%;
    z-index: 999;
  }
  .slide {
    display: flex;
    flex: 1;
    overflow: hidden;

    .swiper-wrapper {
      margin: 0;
    }
  }
  ul {
    display: flex;

    li {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 30px;
      flex-shrink: 0;
      a {
        font-size: 30px;
        color: rgb(51, 51, 51);
        // color: #919191;
      }
      &.active a {
        color: #2086f9;
        font-weight: bold;

        &::before {
          content: "";
          position: absolute;
          bottom: 10px;
          left: 0;
          right: 0;
          margin: auto;
          width: 42px;
          height: 6px;
          border-radius: 3px;
          background-color: #2086f9;
        }
      }
    }
  }
}
</style>
